<template>
  <div :class="pageClass">
    <div class="page__header" v-if="breadcrumb || back">
      <slot name="header">
        <at-breadcrumb :data="breadcrumb" v-if="breadcrumb" />
        <div class="back" v-if="back" @click="$router.back()">
          <el-icon class="icon">
            <ElIconBack />
          </el-icon>
          返回
        </div>
      </slot>
    </div>
    <div class="page__main">
      <slot name="main-header">
        <div class="main-header" v-if="title">
          <div class="title">{{ title }}</div>
        </div>
      </slot>

      <div class="app__search" v-if="$slots.search">
        <slot name="search"></slot>
      </div>
      <div class="app__search--single" v-if="$slots.singleSearch">
        <slot name="singleSearch"></slot>
      </div>

      <div class="main-action" v-if="$slots.action">
        <slot name="action"></slot>
      </div>

      <div class="main-content">
        <slot></slot>
      </div>
    </div>
  </div>
</template>
<script setup>
const props = defineProps({
  breadcrumb: Array,
  title: String,
  back: Boolean,
  full: Boolean,
})

const pageClass = computed(() => {
  let pageClass = {
    page: true,
  }
  if (props.card) pageClass['page--card'] = true
  if (props.full) pageClass['page--full'] = true

  return pageClass
})
</script>
<style lang="scss" scoped>
.page {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 90px);
}

.page--full {
  overflow: hidden;
  .page__main {
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
}
.page__header {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  .breadcrumb {
    line-height: 19px;
    flex: 1;
  }

  .back {
    color: #3d3d3d;
    cursor: pointer;
    .icon {
      vertical-align: middle;
    }
  }
}

.page__title {
  margin-bottom: 16px;
  color: rgba(0, 0, 0, 0.88);
  font-weight: bold;
}

.page__main {
  flex: 1;
  background-color: #fff;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  // border: 1px solid #e4e7ed;
  // background-color: #fff;
  // border-radius: 4px;
  padding: 20px 16px;
}

.header {
  display: flex;
}
.main-header {
  border-bottom: 1px solid #dcdfe6;
  height: 44px;
  display: flex;
  align-items: center;
  margin: -20px -16px 20px -16px;
  padding: 0 16px;
  .title {
    color: rgba(0, 0, 0, 0.88);
    font-weight: 700;
  }
}

.main-action {
  display: flex;
  margin-bottom: 16px;
}

.main-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
</style>
